<template>
    <div class="approve">
        <ul v-if="ifapprove">
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/姓名@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <input type="text" name="" id="" placeholder="请填写您的姓名" v-model="formData.name">
            </li>
            <li class="flex">
                <span class="msg_icon_list msg_icon_list2">
                    <img src="@/assets/my/擅长领域@2x.png" alt="">
                </span>
                <b><em class="f32">*</em>擅长领域</b>
                <div class="options">
                    <mt-checklist
                        v-model="val"
                        :options="options"
                        display="inherit"
                        @change="ch"
                        :max="optionsMax">
                    </mt-checklist>
                </div>
            </li>
            <li class="shanchang flex" v-if="custom[0].bool">
                <input type="text" maxlength="4" placeholder="请填写您的擅长领域" v-model="custom[0].val">
                <i class="icon iconfont icon-fangkuai" @click="addfield(true, false)"></i>
            </li>
            <li class="shanchang flex" v-if="custom[1].bool">
                <input type="text" maxlength="4" placeholder="请填写您的擅长领域" v-model="custom[1].val">
                <i class="icon iconfont icon-fangkuai" @click="addfield(true, true)"></i>
            </li>
            <li class="shanchang flex" v-if="custom[2].bool">
                <input type="text" maxlength="4" placeholder="请填写您的擅长领域" v-model="custom[2].val">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/微信号@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <input type="text" name="" id="" placeholder="请输入您的身份证号" v-model="formData.cardNum">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/微信号@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <input type="text" name="" id="" placeholder="请输入您的手机号" v-model="formData.tel">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/个人简介@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <input type="text" name="" id="" placeholder="请填写您的个人简历" v-model="formData.content">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/从业年限@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <input type="text" name="" id="" placeholder="请填写您的从业年限" v-model="formData.year">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/城市@2x.png" alt="">
                </span>
                <em class="f32">*</em>
                <p @click="showSite(true)">{{addTit}}</p>
                <div class="dizhi">
                    <x-address 
                        v-if="isSite"
                        :hide-district="false"
                        @on-hide="logHide" 
                        @on-show="logShow" 
                        title="请选择地址"
                        :list="addressData" 
                        @on-shadow-change="onShadowChange"
                        placeholder="请选择" 
                        :show.sync="showAddress" 
                        :raw-value="true">
                    </x-address>
                </div>
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/微信号@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请输入您的微信号" v-model="formData.wechat">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/学习经历@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请填写您的学习经历" v-model="formData.study">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/从业经验@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请填写您的从业经历" v-model="formData.experience">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/用户数@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请填写您的服务用户量" v-model="formData.serviceLife">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/服务@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请填写您的服务或合作过的企业" v-model="formData.service">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/时长@2x.png" alt="">
                </span>
                <p @click="shichang(true)">{{duration}}</p>
                <div class="select_time" v-if="ifShichang" @click="shichang(false)">
                    <div class="picker" @click.stop="shichang(true)">
                        <div class="select_time_btn">
                            <span @click.stop="shichang(false)">取消</span>
                            <span @click.stop="shichang(false)">确定</span>
                        </div>
                        <mt-picker :slots="timeData" @change="onValuesChange"></mt-picker>
                    </div>
                </div>
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/支付宝姓名@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请输入您的支付宝姓名" v-model="formData.alipayname">
            </li>
            <li class="flex">
                <span class="msg_icon_list">
                    <img src="@/assets/my/支付宝账号@2x.png" alt="">
                </span>
                <input type="text" name="" id="" placeholder="请输入您的支付宝账号" v-model="formData.alipayID">
            </li>
            <li class="phone">
                <span class="msg_icon_list">
                    <img src="@/assets/my/身份证@2x.png" alt="">
                </span>
                <p>请添加您的身份证正反面</p>
                <div class="shenfen">
                    <div class="zhengjian">
                        <div class="upload">
                            <input type="file" accept="image/*" @change="handleFile('zheng')" class="hiddenInput"/>
                            <img :src="userInfo['zheng']" alt="">
                            <i class="icon iconfont icon-zengjia"></i>
                        </div>
                        <span>添加图片</span>
                    </div>
                    <div class="zhengjian">
                        <div class="upload">
                            <input type="file" accept="image/*" @change="handleFile('fan')" class="hiddenInput"/>
                            <img :src="userInfo['fan']" alt="">
                            <i class="icon iconfont icon-zengjia"></i>
                        </div>
                        <span>添加图片</span>
                    </div>
                </div>
            </li>
            <!-- <li class="phone">
                <span class="msg_icon_list">
                    <img src="@/assets/my/资质@2x.png" alt="">
                </span>
                <p>协会资质或奖励</p>
                <div class="shenfen">
                    <div class="zhengjian">
                        <div class="upload">
                            <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
                            <i class="icon iconfont icon-zengjia"></i>
                        </div>
                        <span>添加图片</span>
                    </div>
                    <div class="zhengjian">
                        <div class="upload">
                            <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
                            <i class="icon iconfont icon-zengjia"></i>
                        </div>
                        <span>添加图片</span>
                    </div>
                </div>
            </li> -->
        </ul>
        <div class="sure" v-if="ifapprove">
            <span>*为必填项</span>
            <button class="f32" @click="approve()">确认认证</button>
        </div>
        <blank v-if="!ifapprove" :title="'您已申请认证大师，请耐心等待审核'"></blank>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Picker, Checklist } from 'mint-ui';
    import { XAddress, ChinaAddressV4Data, Group, } from 'vux'
    Vue.use(Picker)
    Vue.use(Checklist)
    Vue.component(Checklist.name, Checklist);
    import blank from '@/components/masterInfo/blank'
    export default {
        name: 'approve',
        components: {
            Picker,
            Checklist,
            XAddress,
            blank,
        },
        data() {
            return {
                addressData: ChinaAddressV4Data,
                showAddress: true,
                timeData: [
                    {
                        flex: 1,
                        values: ["2分钟", "3分钟", "4分钟", "5分钟", "6分钟", "7分钟", "8分钟", "9分钟", "10分钟", "11分钟", "12分钟", "13分钟", "14分钟", "15分钟", "16分钟", "17分钟", "18分钟", "19分钟", "20分钟", "21分钟", "22分钟", "23分钟", "24分钟", "25分钟",],
                        className: 'slot1',
                        textAlign: 'left'
                    }
                ],
                options: ['八字', '六爻', '风水','梅花易数', '奇门遁甲', '紫微斗数','数字能量', '占星', '塔罗','手面相', '测字', '择机', '四柱命理', '自定义'],
                optionsMax: 3,
                val: [],
                userInfo: {
                    'zheng': '',
                    'fan': '',
                },
                territory: [],
                duration: '请选择回复时长',
                custom: [
                    {
                        bool: false,
                        val: ''
                    },
                    {
                        bool: false,
                        val: ''
                    },
                    {
                        bool: false,
                        val: ''
                    }
                ],
                ifShichang: false,
                formData: {
                    name: '', // 姓名
                    content: '', // 个人简历
                    study: '', // 学习经历
                    experience: '', // 从业经历
                    year: '', // 从业年限
                    serviceLife: '', // 服务用户量
                    service: '', // 服务或合作过的企业
                    city: '', // 所在城市
                    wechat: '', // 微信号
                    alipayname: '', // 支付宝姓名
                    alipayID: '', // 支付宝账号
                    tel: '', // 手机号
                    cardNum: '' // 省份证号
                },
                addTit: '请选择您的所在城市',
                isSite: false,
                city: [],
                ifapprove:''
            }
        },
        methods: {
            showSite(bool) {
                this.isSite = bool
            },
            onShadowChange (ids, names) {
                this.city = ids
                if(names[1] == '市辖区'){
                    this.addTit = names[0] + ' ' + names[0] + ' ' + names[2]
                } else {
                    this.addTit = names.join(' ')
                }
                let addArr = this.addTit.split(' ');
            },
            logHide (str) {
                // console.log("on-hide", str);
            },
            logShow (str) {
                // console.log("on-show", str);
            },
            onValuesChange(picker, values) {
                this.duration = values[0]
            },
            shichang(bool) {
                this.ifShichang = bool
            },
            ch(val) {
                this.val = val.slice(0,3);
                if(this.val.indexOf('自定义') !== -1){
                    this.custom[0].bool = true;
                    // this.optionsMax = 3
                } else {
                    this.territory = [];
                    this.optionsMax = 3
                    this.val.map((val) => {
                        if(val != '自定义') {
                            this.territory.push(val)
                        }
                    })
                    this.custom.map((item) => {
                        item.bool = false
                    })
                }
                if(val.length > 3) {
                    this.$vux.toast.text('最多可选三项')
                }
            },
            addfield(bool1, bool2) {
                if(this.val.length == 3) {
                    this.$vux.toast.text('最多可选三项')
                } else if (this.val.length == 2){
                    this.custom[1].bool = bool1;
                    this.optionsMax = 2
                } else if (this.val.length == 1 & !this.custom[2].bool){
                    this.custom[1].bool = bool1;
                    this.custom[2].bool = bool2;
                    this.optionsMax = 2
                    if (this.val.length == 1 & this.custom[2].bool){
                        this.custom[1].bool = bool1;
                        this.custom[2].bool = bool2;
                        this.optionsMax = 1
                    }
                } else {
                    this.$vux.toast.text('最多可选三项')
                }
            },
            handleFile: function (type) {
                let $target = event.target || event.srcElement
                let file = $target.files[0]
                var reader = new FileReader()
                reader.onload = (data) => {
                    let res = data.target || data.srcElement
                    if(type == 'zheng') {
                        this.userInfo['zheng'] = res.result
                    } else {
                        this.userInfo['fan'] = res.result
                    }
                }
                reader.readAsDataURL(file)
            },
            isMasterAuthorized() { // 此用户是否认证大师
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('isMasterAuthorized', params).then(res => {
                    if(res.code == 200) {
                        this.ifapprove = res.data == 1 ? false : true
                    }
                }, err => {

                })
            },
            approve() { // 提交认证信息
                let d = this.formData;
                for (let i=0;i<this.custom.length;i++){
                    if(this.custom[i].bool){
                        this.territory.push(this.custom[i].val)
                    }
                }
                if(d.name.replace(/\s+/g, "") != '') {
                    if(d.cardNum.replace(/\s+/g, "") != '') {
                        if(d.content.replace(/\s+/g, "") != '') {
                            if(this.territory.join(',').length != 0) {
                                if(d.year.replace(/\s+/g, "") != '') {
                                    if(this.city.length != 0){
                                        if(d.tel.replace(/\s+/g, "") != '') {
                                            let params = {
                                                userId: this.$store.state.userId, // 用户Id
                                                name: d.name, // 姓名
                                                content: d.content, // 个人简历
                                                study: d.study, // 学习经历
                                                experience: d.experience, // 从业经历
                                                year: d.year, // 从业年限
                                                serviceLife: d.serviceLife, // 服务用户量
                                                service: d.service, // 服务或合作过的企业
                                                areaId1: this.city[0], // 省
                                                areaId2: this.city[1], // 市
                                                wechat: d.wechat, // 微信号
                                                alipayname: d.alipayname, // 支付宝姓名
                                                alipayID: d.alipayID, // 支付宝账号
                                                replytime: this.duration, // 回复时长
                                                domain: this.territory.join(','), // 擅长领域
                                                cardPhoto1: this.userInfo.zheng, // 身份证正面
                                                cardPhoto2: this.userInfo.fan, // 身份证反面
                                                tel: d.tel, // 手机号
                                                card: d.cardNum, // 身份证号
                                                status: 0
                                            }
                                            let qing = false;
                                            for(let key in params) {
                                                if(params[key].length == 0) {
                                                    this.$vux.toast.text('请填写完整信息')
                                                } else {
                                                    qing = true
                                                }
                                            }
                                            if(qing) {
                                                this.$http.fetchPost('attestationMaster', params).then(res => {
                                                    if(res.code == 200){
                                                        this.$vux.toast.text('认证信息已提交,请内心等候回复')
                                                        this.$router.push({
                                                            path: '/my'
                                                        })
                                                    } else {
                                                        this.$vux.toast.text(res.msg)
                                                    }
                                                }, err => {
                                                    console.log(err)
                                                })
                                            }
                                        } else {
                                            this.$vux.toast.text('请输入手机号')
                                        }
                                    } else {
                                        this.$vux.toast.text('请选择城市')
                                    }
                                } else {
                                    this.$vux.toast.text('请输入从业年限')
                                }
                            } else {
                                this.$vux.toast.text('请选择擅长领域')
                            }
                        } else {
                            this.$vux.toast.text('请填写简介')
                        }
                    } else {
                        this.$vux.toast.text('请填写身份证号')
                    }
                } else {
                    this.$vux.toast.text('请填写姓名')
                } 
            }
        },
        mounted() {
            this.isMasterAuthorized()
        }
    }
</script>

<style lang="less" scoped>
    .approve{
        flex: 1;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        z-index: 9;
        ul{
            .pb(168);
            .flex{
                display: flex;
                border-bottom: 1px solid #f2f2f2;
                background: #fff;
                position: relative;
                .msg_icon_list{
                    .h(100);
                    .w(100);
                    position: relative;
                    img{
                        .w(52);
                        .h(52);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                .msg_icon_list2{
                    left: 20px;
                }
                em{
                    .lh(88);
                    position: relative;
                    top: 2px;
                    left: -5px;
                    color: red; 
                    z-index:999;
                    font-weight: normal;
                }
                input{
                    flex: 1;
                    .h(98);
                    border: none;
                    &:focus{
                        outline:none;
                    }
                } 
                p{
                    flex: 1;
                    .lh(100);
                    color: #666;
                }
                b{
                    .w(760);
                    .lh(100);
                    position: relative;
                    left: 40px;
                }
                .select_time{
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                    background: rgba(0, 0, 0, .3);
                    z-index: 100;
                    .picker{
                        background: #fff;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        .h(360);
                        z-index: 999;
                        .select_time_btn {
                            width: 100%;
                            .h(88);
                            display: flex;
                            border-bottom: 1px solid #f2f2f2;
                            span{
                                flex: 1;
                                color: #000;
                                background: #fff;
                                z-index: 1000;
                                .lh(88);
                                text-align: center;
                                &:last-child{
                                    border-left: 1px solid #f2f2f2;
                                    color: #189BEB;
                                }
                            }
                        }
                    }
                }
                .dizhi{
                    position: absolute;
                    left: 50px;
                    top: 15px;
                    opacity: 0;
                    z-index: 100;
                }
            }
            .shanchang{
                border-bottom: 1px solid #f2f2f2;
                .h(98);
                position: relative;
                input{
                    .h(94);
                    .w(300);
                    .pl(30);
                    .pr(200);
                    // background: red;
                }
                i.icon{
                    position: absolute;
                    font-size: 28px;
                    color: #189BEB;
                    .lh(98);
                    left: 130px;
                }
            }
            .phone{
                border-bottom: 1px solid #f2f2f2;
                .pb(20);
                .msg_icon_list{
                    .h(100);
                    .w(100);
                    display: inline-block;
                    position: relative;
                    img{
                        .w(52);
                        .h(52);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
                p{
                    display: inline-block;
                    .lh(100);
                    position: relative;
                    top: -20px;
                }
                .shenfen{
                    .zhengjian{
                        overflow: hidden;
                        display: inline-block;
                        display: flex;
                        flex-direction: column;
                        display: inline-block;
                        .ml(80);
                        .upload{
                            border: 1px dashed #ccc;
                            .w(100);
                            .h(100);
                            text-align: center;
                            position: relative;
                            input{
                                .w(100);
                                .h(100);
                                position: absolute;
                                left: 0;
                                background: red;
                                opacity: 0;
                                z-index: 99;
                            }
                            i.icon{
                                font-size: 30px;
                                .lh(100);
                                color: #999;
                            }
                            img{
                                .w(100);
                                .h(100);
                                position: absolute;
                                top: 0;
                                left: 0;
                                z-index: 98;
                            }
                        }
                    }
                    span{
                        .w(104);
                        .lh(40);
                        display: inline-block;
                        text-align: center;
                    }
                }
            }
        }
        .sure{
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px solid #f2f2f2;
            width: 100%;
            .h(180);
            background: #fff;
            .padd(40, 20);
            .pt(20);
            box-sizing: border-box;
            z-index: 1000;
            span{
                .mb(20);
                width: 100%;
                display: inline-block;
                text-align: center;
                color: red;
            }
            button{
                .h(88);
                width: 100%;
                border: none;
                background: #189BEB;
                color: #fff;
                box-sizing: border-box;
            }
        }
    }
</style>
<style>
    .mint-cell{
        width: auto;
        min-height: 28px;
        display: inline-block;
    }
    .mint-checklist-label{
        padding: 0 5px;
    }
    .mint-cell-wrapper{
        padding: 0;
    }
    .mint-checkbox-label{
        font-size: 14px;
        margin-left: 4px;
    }
    .mint-checkbox-core{
        width: 15px;
        height: 15px;
        font-size: 15px;
    }
</style>
